<template>
	<view class="page">
		<u-list @scrolltolower="scrolltolower">
			<u-list-item class="u-list-item" v-for="(item, index) in list" >
				<view class="block mar-bottom77" >

					<view class="flex align-center mar-bottom29">
						<view class="symbol"></view>
						<view class="font_s24 mar-left12  label">{{item.label}}</view>

					</view>
					<view v-for="subItem in item.items" class="item cr-333 font_s26" @click='handleJump(subItem)'>
						
						<image style="vertical-align: middle;" src="/static/img/icon_his_art.png" v-if="subItem.type===1" class="w-28 h-28"></image>	
						<image style="vertical-align: middle;" src="/static/img/icon_his_audio.png" v-if="subItem.type===3" class="w-28 h-28"></image>
						<image style="vertical-align: middle;" src="/static/img/icon_his_video.png" v-if="subItem.type===2" class="w-28 h-28"></image>
						<text class="mar-left7">{{subItem.contentItemTitle}}</text>
					</view>

				</view>

			</u-list-item>
		</u-list>
		<!-- 	<view class="block mar-bottom77">

			<view class="flex align-center mar-bottom29">
				<view class="symbol"></view>
				<view class="font_s24 mar-left12  label">今日 浏览1条内容</view>

			</view>
			<view class="item cr-333 font_s26">中国医药城10个重大产业化项目开工</view>

		</view> -->
	<!-- 	<view class="block mar-bottom77">

			<view class="flex align-center mar-bottom29">
				<view class="symbol"></view>
				<view class="font_s24 mar-left12  label">11-21 浏览4条内容</view>

			</view>
			<view class="item cr-333 font_s26">中国医药城10个重大产业化项目开工</view>
			<view class="item cr-333 font_s26">中国医药城10个重大产业化项目开工</view>
			<view class="item cr-333 font_s26">中国医药城10个重大产业化项目开工</view>
			<view class="item cr-333 font_s26">中国医药城10个重大产业化项目开工</view>
		</view> -->
	</view>
</template>

<script>
	function isToday(dateString) {
	  const today = new Date();
	  const date = new Date(dateString);
	  return date.getDate() === today.getDate() &&
	         date.getMonth() === today.getMonth() &&
	         date.getFullYear() === today.getFullYear();
	}

	function sortByViewingTimeAndGroup(items) {
		  // 按 viewingTime 属性对数组进行排序
		  items.sort((a, b) =>  new Date(b.viewingTime)-new Date(a.viewingTime) );
		
		  // 使用 reduce 方法对数组元素进行分组
		  const groupedByTime = items.reduce((groups, item) => {
		    // 查找是否已有当前 viewingTime 的分组
		    const group = groups.find(g => g.time === item.viewingTime);
		
		    if (group) {
		      // 如果分组已存在，则将当前元素添加到该分组的 items 数组中
		      group.items.push(item);
		    } else {
		      // 如果分组不存在，创建一个新的分组，并将当前元素作为第一个元素放入 items 数组中
		      groups.push({
		        time: item.viewingTime,
		        label: '', // 初始时label为空，后续会更新
		        items: [item]
		      });
		    }
		    return groups;
		  }, []);
		
		  // 更新每个分组的 label
		  groupedByTime.forEach(group => {
		    if (isToday(group.time)) {
		      group.label = `今日 浏览${group.items.length}条内容`;
		    } else {
		      const date = new Date(group.time);
		      const formattedDate = `${date.getMonth() + 1}-${date.getDate()}`;
		      group.label = `${formattedDate} 浏览${group.items.length}条内容`;
		    }
		  });
		
		  return groupedByTime;
	}
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total:0,
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
      handleJump(item){
        console.log(item)
        console.log(11111,item)
        let url = ''
        switch(item.type){
        	case 1:
        	 url = `/pages/imgtxtDetails/imgtxtDetails?id=${item.contentItemId}`
        	break;
        	case 2:
        		url = `/pages/VideoItemDetail/VideoItemDetail?id=${item.contentItemId}`
        	break;
        	case 3:
        		url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}&cid=${item.contentItemId}`
        	break;
        }
        uni.navigateTo({
        	url
        })
      },
			async init() {
				this.reset()
				this.getList(true)

			},
			async getList(init) {
				if (init || this.total > this.list.length) {
					return this.$http.get(
						`/yaolexue-service-portal/contentItemHistory/contentItemHistoryByDate`, {
							limit: 10,
							page: this.page,
							isDesc: true,
						}, ).then(res => {
						console.log(res);
						const datas = sortByViewingTimeAndGroup(res.data.items)
						this.list = init ? datas : [...this.list, datas],
							console.log(this.list);
						this.total = res.data.total
					})
				}
			},
			reset() {
				this.list = []
				this.total = 0
				this.page = 1
			},
			scrolltolower() {
				this.page += 1
				this.getList()
			},
		},
	}
</script>

<style lang="scss">
	.page {
		padding: 41rpx 31rpx;
	}

	.symbol {
		width: 20rpx;
		height: 20rpx;
		border: 3px solid #D49B02;
		border-radius: 50%;
	}

	.label {
		color: #D49B02;
	}

	.block {
		.item {
			&:not(:last-child) {
				margin-bottom: 39rpx;
			}
		}
	}
</style>